<template>
	<!-- 举报留言直播、回看通用组件 -->
	<div class="pop-up-report-box">
		<header>
			<p v-if="isToggle">互动聊天</p>
			<i class="close-icon" @click="closeAndSureBtn('close')"></i>
		</header>
		<div class="step-one-panel" v-if="isToggle">
			<div class="step-one-content">
				<div class="msgContain">
					<span class="name">{{reportMsgObj.name}}:</span>
					<span class="message">{{reportMsgObj.message}}</span>
				</div>
			</div>
			<div class="report-btn" @click="clickBtn">举报</div>
		</div>
		<div class="step-two-panel" v-else>
			<p class="step-two-content">是否确定举报该条用户言论?</p>
			<div class="btn-box">
				<div class="cancel-btn" @click="closeAndSureBtn('close')">取消</div>
				<div class="sure-btn" @click="closeAndSureBtn('sureBtn')">确定</div>
			</div>
		</div>
	</div>
</template>
<script>
	export default {
		props: {
			reportMsgObj: Object,
			title: String,
		},
		data() {
			return {
				isToggle: true,
			};
		},
		methods: {
			clickBtn() {
				this.isToggle = !this.isToggle;
			},
			closeAndSureBtn(type) {
				if(type==='sureBtn'){
					fun.toastMessage("举报成功")
				}				
				this.$emit("formChildMsg", {
					type: "closeVantPopup",
				});
			},
		}
	};
</script>
<style scoped lang="less">
	.pop-up-report-box {
		width: 100vw;
		// height: 461px;
		border-radius: 20px 20px 0px 0px;
		overflow: hidden;
		position: relative;

		header {
			width: 100vw;
			height: 100px;
			p {
				font-size: 36px;
				font-weight: 500;
				color: #333333;
				line-height: 100px;
				text-align: center
			}
			.close-icon {
				width: 48px;
				height: 48px;
				background: url('../assets/images/report_close.png') no-repeat;
				background-size: 48px 48px;
				position: absolute;
				top: 25px;
				right: 25px;
			}
			.btn-box {
				width: 100vw;
				height: 55px;
				border-radius: 10px;
				background-color: salmon;
			}
		}

		.step-one-panel {
			width: 100%;
			// height: 461px;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;
			.step-one-content {
				width: 630px;
				background: #F8F8F8;
				border-radius: 6px;
				font-size: 30px;
				padding: 24px;
				line-height: 42px;
				font-weight: 500;
				margin-top:20px;
				.msgContain{
					max-height: 150px;
					overflow: hidden; //超出3行隐藏
					display:-webkit-box;
					-webkit-line-clamp:3;
					-webkit-box-orient:vertical;
					.name {
					color: #FFE159;
					}
					.message {
						color: #333333;
					}
				}		
			}
			.report-btn {
				width: 155px;
				height: 55px;
				background: #1677FF;
				border-radius: 10px;
				text-align: center;
				line-height: 55px;
				font-size: 28px;
				font-weight: 500;
				color: #FFFFFF;
				margin-top: 63px;
				margin-bottom: 100px;
			}
		}

		.step-two-panel {
			width: 100%;
			// height: 441px;
			display: flex;
			flex-direction: column;
			justify-content: flex-start;
			align-items: center;

			.step-two-content {
				height: 50px;
				font-size: 36px;
				font-weight: 500;
				color: #333333;
				line-height: 50px;
				text-align: center;
				margin: 20px 0 93px;
			}

			.btn-box {
				width: 65%;
				display: flex;
				justify-content: space-around;
				margin-bottom: 100px;
				div {
					width: 155px;
					height: 55px;
					border-radius: 10px;
					line-height: 55px;
					text-align: center;
					font-size: 28px;
					font-weight: 500;
					color: #FFFFFF;
				}

				.cancel-btn {
					background-color: #CDCDCD;
				}

				.sure-btn {
					background-color: #1677FF;
				}
			}
		}
	}
</style>
